<template>
  <el-form
    :label-position="labelPosition"
    label-width="80px"
    style="max-width: 560px"
    class="border my-auto mx-auto p-5"
  >
    <div class="fs-2" align="center">欢迎登录</div>
    <div align="center" class="my-2">
      <img src="@/assets/logo.png" alt="" style="height: 100px; width: 100px" />
    </div>

    <el-form-item label="用户名">
      <el-input 
      v-model="login.username" 
      placeholder="请输入用户名"
      ></el-input>
    </el-form-item>
    <div align="right">忘记用户名?</div>

    <el-form-item label="密码">
      <el-input 
      v-model="login.password" 
      placeholder="请输入密码" 
      ></el-input>
    </el-form-item>
    <div align="right">忘记密码?</div>

    <div class="text-center">
      <el-button type="primary" class="mt-3" @click="loginAction">登录</el-button
      >
    </div>
    <div class="text-left mt-3">
      没有账户<router-link to="/registry">立即注册</router-link>
    </div>
  </el-form>
</template>

<script>
import auth from '@/tools/auth.js'

export default {
  name: "LoginFrame",
  data() {
    return {
      //登录时，需要绑定的数据
      login: {
        username: null,
        password: null,
      },
    };
  },
  mounted(){
    auth.logout();//登出清空数据
  },
  methods: {
    loginAction(){
      this.$axios.post("/api/login", this.login).then((response) => {
        let data = response.data;
        //登录成功->保存令牌->跳转到个人空间首页
        if (data.code == 200) {
          //1.保存令牌
          let token = data.data;
          auth.saveToken(token);
          //2.跳转到个人空间的首页
          this.$router.push("/space");
        } else {
          alert(data.msg);
        }
      });
    },
  },
};
</script>

<style>
</style>